import React from "react"
import { Typography, Space, Divider } from "antd"
import { Link } from "react-router-dom"
import styles from "./KnowledgeListPage.module.scss" // 导入自定义的 module.scss 文件

const { Title, Paragraph, Text } = Typography

const KnowledgeListPage: React.FC = () => {
  return (
    <div style={{ padding: "0px 20px", maxWidth: "800px", margin: "0 auto" }}>
      <Typography>
        <Title level={2}>知识点模块</Title>
        <Paragraph>
          欢迎来到知识点模块。在这里，你将看到我在前端开发过程中学习和掌握的各种知识点的实践。通过这些知识点的展示，可以了解我在
          <Text strong>
            <Link to="/knowledge/react" className={styles.reactLink}>
              React
            </Link>
          </Text>
          、
          <Text strong>
            <Link to="/knowledge/js_ts" className={styles.jsTsLink}>
              JavaScript/TypeScript
            </Link>
          </Text>
          、
          <Text strong>
            <Link to="/knowledge/css" className={styles.cssLink}>
              CSS
            </Link>
          </Text>
          等领域的深入理解和应用。
        </Paragraph>
        <Divider />
        <Space direction="vertical" size="middle">
          <Paragraph>
            每个知识点的页面都包含了我在实际项目或学习中的实践总结。这些内容不仅展示了我的技术能力，还体现了我对这些知识点的理解和应用能力。
          </Paragraph>
          <Text type="secondary">
            你可以通过左侧的导航栏来浏览不同的知识点分类和具体的内容。
          </Text>
        </Space>
      </Typography>
    </div>
  )
}

export default KnowledgeListPage
